<!doctype html><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>alphapng</title>
<style>
@import url(../../README.css);
html {
  color: whitesmoke; background-color: #222;
  margin: 0.5em 2em; line-height: 1.5;
}
.view { padding: 20px; }
.bg {
  -uu-box-shadow: white 1px 1px 20px;
  -uu-background: url(../../img/grid1.gif) repeat-y 32px 0,
              url(../../img/grid1.gif) repeat-y 96px 0,
              url(../../img/grid1.gif) repeat-y 160px 0,
              url(../../img/grad2.png) repeat-x left top,
              url(../../img/grad1.png) skyblue repeat-x left bottom;
}
.bg2 {
  -uu-border-radius: 20px;
  -uu-box-shadow: white 1px 1px 20px;
  -uu-background: url(../../img/grad2.png) skyblue repeat left bottom;
}
.bg2 > div {
  padding: 10px;
}

</style>
<script>
window.UUMETA_DEBUG = 1;
window.UUMETA_IMAGE_DIR = "../../img";
</script>
<script type="text/xaml" id="xaml"><?xml version="1.0"?>
  <Canvas xmlns="http://schemas.microsoft.com/client/2007"></Canvas></script>
<script src="../../uuAltCSS.js"></script>
</head><body>
<h1>alpha transparency for png images</h1>
<input type="button" value="revalidate" onclick="uuAltCSS()" />

<h2>alpha png images</h2>
<p>&lt;img class="<b>alpha</b>" src="some<b>.png</b>"&gt; or
   <br />&lt;img src="some<b>.alpha.png</b>"&gt;
</p>
  <pre style="background-image: url(../../img/grid1.gif); color: black">
    <img class="alpha" src="../../img/c32.png" /> alpha transparency
    <img class="alpha" src="../../img/s32.alpha.png" /> alpha transparency * 2 (OK)
    <img class=""      src="../../img/i32.png" /> (not transparency in IE6)
    <img class="alpha" src="../../img/o32.png" /> alpha transparency
    <img class=""      src="../../img/f32.alpha.png" /> alpha transparency
  </pre>
  <pre>
    &lt;img class="<b>alpha</b>" src="../../img/c32.png" /&gt;
    &lt;img class="<b>alpha</b>" src="../../img/s32<b>.alpha.png</b>" /&gt; (OK)
    &lt;img class=""      src="../../img/i32.png" /&gt; (not transparency in IE6)
    &lt;img class="<b>alpha</b>" src="../../img/o32.png" /&gt;
    &lt;img class=""      src="../../img/f32<b>.alpha.png</b>" /&gt;
  </pre>
<hr />

<h2>alpha png image buttons</h2>
<p>&lt;input type="image" class="<b>alpha</b>" src="some<b>.png</b>"&gt; or
    <br />&lt;input type="image" src="some<b>.alpha.png</b>"&gt;
</p>

  <div style="padding: 1em; background-image: url(../../img/grid1.gif); height: 32px">
    <input type="image" class="alpha" src="../../img/o32.png"       onclick="alert('clicked')" title="(click me!)" />
    <input type="image" class="alpha" src="../../img/f32.alpha.png" onclick="alert('clicked')" title="(click me!)" />
    <input type="image"               src="../../img/i32.png"       onclick="alert('clicked')" title="(click me!)" />
    <input type="image" class="alpha" src="../../img/s32.png"       onclick="alert('clicked')" title="(click me!)" />
    <input type="image"               src="../../img/c32.alpha.png" onclick="alert('clicked')" title="(click me!)" />
  </div>
  <pre>
    &lt;input type="image" class="<b>alpha</b>" src="../../img/o32.png"       onclick="alert('clicked')" /&gt;
    &lt;input type="image" class="<b>alpha</b>" src="../../img/f32<b>.alpha.png</b>" onclick="alert('clicked')" /&gt;
    &lt;input type="image"               src="../../img/i32.png"       onclick="alert('clicked')" /&gt;
    &lt;input type="image" class="<b>alpha</b>" src="../../img/s32.png"       onclick="alert('clicked')" /&gt;
    &lt;input type="image"               src="../../img/c32<b>.alpha.png</b>" onclick="alert('clicked')" /&gt;
  </pre>
<hr />

<h2>alpha png background-image</h2>
  <p>background-image:, background-position: や background-repeat: も使用できます。
  </p>
  <p>背景画像のpngファイルを透過するには、-uu-xxx プロパティと一緒に指定します。
  </p>

  <div class="view">
    <div class="bg">
      <pre>
        <img class="alpha" src="../../img/o32.png" />
        <img class="alpha" src="../../img/f32.png" />
        <img class="alpha" src="../../img/i32.png" />
        <img class="alpha" src="../../img/s32.png" />
        <img class="alpha" src="../../img/c32.png" />
      </pre>
    </div>
  </div>
<pre>
  &lt;style&gt;
    .view { padding: 20px; }
    .bg {
      <b>-uu-box-shadow</b>: white 1px 1px 20px;
      background: url(../../img/grid1.gif) repeat-y 32px 0,
                  url(../../img/grid1.gif) repeat-y 96px 0,
                  url(../../img/grid1.gif) repeat-y 160px 0,
                  url(<b>../../img/grad2.png</b>) repeat-x left top,
                  url(<b>../../img/grad1.png</b>) skyblue repeat-x left bottom;
    }
  &lt;/style&gt;
  &lt;div class="view"&gt;
    &lt;div class="bg"&gt;
      &lt;pre&gt;
        &lt;img class="<b>alpha</b>" src="../../img/o32.png" /&gt;
        &lt;img class="<b>alpha</b>" src="../../img/f32.png" /&gt;
        &lt;img class="<b>alpha</b>" src="../../img/i32.png" /&gt;
        &lt;img class="<b>alpha</b>" src="../../img/s32.png" /&gt;
        &lt;img class="<b>alpha</b>" src="../../img/c32.png" /&gt;
      &lt;/pre&gt;
    &lt;/div&gt;
  &lt;/div&gt;
</pre>

<hr />
  <p>背景画像のレンダリングに AlphaImageLoader を使用していないため、AlphaImageLoader にまつわる不具合(リンクやボタンがクリックできないなど)は発生しません。
  </p>

  <div class="view">
    <div class="bg2">
      <div>
        LINK: <a href="http://uupaa-js.googlecode.com/">uupaa.js</a>
        <hr />
        BUTTON: <input type="button" value="click" onclick="alert('click')" />
        <hr />
        TEXTAREA: <textarea cols="10" rows="2">textarea</textarea>
        <hr />
        SELECT BOX:
        <select>
          <option>1</option>
          <option>2</option>
          <option>3</option>
        </select>
      </div>
    </div>
  </div>

  <pre>
&lt;style&gt;
.bg2 {
  -uu-border-radius: 20px;
  -uu-box-shadow: white 1px 1px 20px;
  background: url(../../img/grad2.png) skyblue repeat left bottom;
}
.bg2 &gt; div {
  padding: 10px;
}
&lt;style&gt;
  &lt;div class="view"&gt;
    &lt;div class="bg2"&gt;
      &lt;div&gt;
        LINK: &lt;a href="http://uupaa-js.googlecode.com/"&gt;uupaa.js&lt;/a&gt;
        &lt;hr /&gt;
        BUTTON: &lt;input type="button" value="click" onclick="alert('click')" /&gt;
        &lt;hr /&gt;
        TEXTAREA: &lt;textarea cols="10" rows="2"&gt;textarea&lt;/textarea&gt;
        &lt;hr /&gt;
        SELECT BOX:
        &lt;select&gt;
          &lt;option&gt;1&lt;/option&gt;
          &lt;option&gt;2&lt;/option&gt;
          &lt;option&gt;3&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </pre>


</body></html>
